<template>
  <el-row style="padding: 10px;margin-bottom: 20px;">
    <!-- 企业信息情况 -->
    <el-row>
      <el-col span="24">
        <el-card class="card">
          <h3>企业信息情况：</h3>
          <el-divider></el-divider>
          <el-row class="flex">
            <el-col :span="3">企业信息完善度：</el-col>
            <el-col :span="18">
              <el-progress :text-inside="true" :stroke-width="32" :percentage="progress"></el-progress>
            </el-col>
            <el-col class="flex-center" :span="3">
              <el-button type="primary" size="small" @click="$router.push('/enterprise/companybasicinf')">
                {{ progress !== 100 ? '去完善' : '去修改' }}
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!--数据统计-->
    <el-row>
      <el-card class="card">
        <h3 v-pre>数据统计：</h3>
        <el-divider></el-divider>
        <el-card>
          <el-row style="">
            <avue-data-display :option="subscribeAoption"></avue-data-display>
          </el-row>
        </el-card>

        <el-row style="margin-top: 50px;">
          <el-col :span="12" class="flex-center">
            <!--            申报政策饼图-->
            <div id="sbzc" style=";height: 400px; width: 400px;"></div>
          </el-col>
          <el-col :span="12" class="flex-center">
            <!--            需求发布饼图-->
            <div id="xqbt" style="height: 450px; width: 450px;"></div>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </el-row>
</template>

<script>
import {mapGetters} from "vuex";
import * as echarts from "echarts";
import {getData} from "@/api/enterprise/home";

export default {
  name: "wel",
  data() {
    return {
      data: {},
      progress: 0, // 企业信息完善度

      // 数据显示
      subscribeAoption: {}
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  async mounted() {
    let res = await getData(this.userInfo.account)
    const data = res.data.data

    this.data = data // 所有的数据单独存放

    this.progress = parseInt(data.companyInfoCompletion * 10000) / 100 // 计算企业信息完善度

    this.subscribeAoption = {
      span: 3,
      data: [
        {title: '政策订阅累计', count: data.policySubCount},
        {title: '政策查阅次数', count: data.policyLookCount},
        {title: '已申报政策', count: data.policyApplyCount},
        {title: '需求发布', count: data.demandCount},
        {title: '融资贷款申请', count: data.lenderFinancingApplyCount},
        {title: '发布产品总量', count: data.prodReleaseCount},
        {title: '采购产品总量', count: data.prodProcCount},
        {title: '问题反馈量', count: data.problemCount}
      ]
    }

    let myChartData = [0, 0, 0]
    if (data.policyApplyStatusCharts) {
      // 如果有这个数据。把数据格式化；不然就默认0，0，0
      if (data.policyApplyStatusCharts.length && data.policyApplyStatusCharts.length > 0) {
        data.policyApplyStatusCharts.forEach(v => {
          myChartData[v.name - 1] = v.value
        })
        // 给空出来的数据补上假数据（0）
        if (myChartData.length) {
          for (let i = 0; i <= 2; i++) {
            myChartData[i] = myChartData[i] ? myChartData[i] : 0
          }
        }
      }
    }
    let myChartData1 = [
      {name: '人才服务', value: 0},
      {name: '专业服务', value: 0},
      {name: '创业服务', value: 0},
      {name: '上市辅导', value: 0}]
    for (let j = 0; j < data.serviceTypeCharts.length; j++) {
      for (let i = 0; i<myChartData1.length; i++){
        if (myChartData1[i].name !== data.serviceTypeCharts[j].name) continue
        myChartData1[i].value = data.serviceTypeCharts[j].value
      }
    }

    // echarts数据
    let myChart = echarts.init(document.getElementById('sbzc'));
    let myChart1 = echarts.init(document.getElementById('xqbt'));

    myChart.setOption({
      title: {
        text: `申报政策（共${data.policyApplyCount}条）`,
      },
      tooltip: {},
      xAxis: {
        data: ['待审核', '通过审核', '驳回']
      },
      color: 'rgb(87,217,137)',
      yAxis: {},
      series: [{
        barWidth: 35,
        name: '申报数量',
        type: 'bar',
        data: myChartData,
        itemStyle: {
          normal: {
            //柱形图圆角，初始化效果
            barBorderRadius: [20, 20, 0, 0],
            label: {
              show: true,
              position: 'top',
              distance: 0,
              align: 'center',
              verticalAlign: 'bottom',
              fontSize: 20
            }
          }
        }
      }]
    });

    myChart1.setOption({
      title: {
        text: `需求发布情况（共${data.demandCount}条）`,
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          width: 280,
          name: '需求服务数量',
          type: 'pie',
          radius: ['40%', '65%'],
          center: ['80%', '50%'], // 设置饼图位置

          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            normal: {
              show: true,
              position: 'outside',
              formatter(pa) {
                return `${pa.name}：${pa.value} 条`
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                // fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '28',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 20,
              length2: 20,
              lineStyle: {
                color: '#333'
              }
            }
          },
          data: myChartData1
        }
      ]
    });

  },
  methods: {},
};
</script>

<style>
.card {
  padding: 0 10px 10px 10px;
  margin-bottom: 10px;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex !important;
  align-items: center !important;
  /*margin-bottom: 40px;*/
}

.el-card > .el-card__body {
  padding: 0 10px 10px 10px !important;
}

.el-font-size {
  font-size: 14px;
}
</style>

